<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
	<script src="js/jquery.js"></script>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
	<link href="css/main.css" rel="stylesheet" type="text/css"  />
	<script src = "http://www.heibbs.net/ver/0.0.5/action.js"></script>
</head>
<body>
	<header class = "mui-bar mui-bar-nav">
		<h1 class = "mui-title" id = "times">Still Guing</h1>
		<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
	</header>
	<div class="mui-content-padding " style="width:100%;height:50px;bottom: 0;position: absolute;z-index:999999999;">
		<div class="mui-input-row" style="width:80%;height:100%;bottom:0;">
			<label style="background-color: #0062CC;">你说：</label>
			<input type="text" placeholder="嘿嘿嘿" style="background-color: aquamarine;">
		</div>
		<span style="height:45px;width: 15%;position: absolute;bottom: 0;right: 0;" class="mui-icon mui-icon-paperplane"></span>
	</div>
	<div id = "loading-div">
		<span id = "loading-text">Loading</span>
	</div>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!--菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-right">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<header class = "mui-bar mui-bar-nav">
					
					</header>
					<div class="mui-content">
						<div class = "mui-content-padded">
							<span class = "mui-tab-label">你发现了什么东西</span>
						</div>
						<div class = "mui-content-padded">
							<span class = "mui-tab-label">当你能看见这行字时，说明这玩意还没开发好</span>
						</div>
						<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
							<li class="mui-table-view-cell" id="backhome">
								<a class="mui-navigate-right" href="#offCanvasSide">
									返回首页
								</a>
							</li>
							<li class="mui-table-view-cell" id="go2048">
								<a class="mui-navigate-right" href="#offCanvasSide">
									前往2048
								</a>
							</li>
							<li class="mui-table-view-cell" id="gofroum">
								<a class="mui-navigate-right" href="#offCanvasSide">
									前往论坛
								</a>
							</li>
							<li class="mui-table-view-cell" id="xunxi">
								<a class="mui-navigate-right" href="#offCanvasSide">
									APP讯息
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" href="#offCanvasSide">
									聊天
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
								Developing
								</a>
							</li>
						
						</ul>
					</div>
				</div>	
			</aside>
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
					<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
					<h1 class="mui-title">左滑导航</h1>
				</header>
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
						<div class="mui-content" id = "mains">
							<div class = "mui-content-padded">
								<span class="mui-tab-label">来玩会2048？</span>
							</div>
							<div class = "mui-content-padded">
								<button class = "mui-btn-block" onclick="go_to_2048()">点击开始</button>
							</div>
							<div class = "mui-content-padded">
								<button class = "mui-btn-block" onclick="go_froum()">进入论坛</button>
								<button class = "mui-btn-block" onclick="getupdate()">查询更新</button>
								<button class = "mui-btn-block" onclick="go_xunxi()">最新APP讯息</button>
								<span class = "mui-tab-label">上次更新：2020/3/18 19：11</span>
								<br>
								<span class = "mui-tab-label">版本：0.0.9.01</span>
								<br>
								<span class="mui-tab-label">版本号:</span>
								<span class="mui-tab-label" id = "version">13</span>
							</div>
						</div>
				</div>
				<!-- off-canvas backdrop -->
			</div>
		</div>
		<script>
			mui.init({
				swipeBack: false,
			});
			mui('#backhome').on( 'tap' , 'a' , function(){
				back_to_home();
			});
			mui('#go2048').on( 'tap' , 'a' , function(){
				go_to_2048();
			});
			mui('#gofroum').on( 'tap' , 'a' , function(){
				go_froum();
			});
			mui('#xunxi').on( 'tap' , 'a' , function(){
				go_xunxi();
			});
			 //侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			 //主界面容器
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			 //菜单容器
			var offCanvasSide = document.getElementById("offCanvasSide");
			 //Android暂不支持整体移动动画
			if (!mui.os.android) {
				document.getElementById("move-togger").classList.remove('mui-hidden');
				var spans = document.querySelectorAll('.android-only');
				for (var i = 0, len = spans.length; i < len; i++) {
					spans[i].style.display = "none";
				}
			}
			 //移动效果是否为整体移动
			var moveTogether = false;
			 //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
			var classList = offCanvasWrapper[0].classList;
			 //变换侧滑动画移动效果；
			mui('.mui-input-group').on('change', 'input', function() {
				if (this.checked) {
					offCanvasSide.classList.remove('mui-transitioning');
					offCanvasSide.setAttribute('style', '');
					classList.remove('mui-slide-in');
					classList.remove('mui-scalable');
					switch (this.value) {
						case 'main-move':
							if (moveTogether) {
								//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
								moveTogether = false;
							}
							break;
						case 'main-move-scalable':
							if (moveTogether) {
								//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
							}
							classList.add('mui-scalable');
							break;
						case 'menu-move':
							classList.add('mui-slide-in');
							break;
						case 'all-move':
							moveTogether = true;
							//整体滑动时，侧滑菜单在inner-wrap内
							offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
							break;
					}
					offCanvasWrapper.offCanvas().refresh();
				}
			});
			document.getElementById('offCanvasShow').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('show');
			});
			document.getElementById('offCanvasHide').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('close');
			});
			 //主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			 //实现ios平台的侧滑关闭页面；
			if (mui.os.plus && mui.os.ios) {
				offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
				offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
					plus.webview.currentWebview().setStyle({
						'popGesture': 'close'
					});
				});
			}
		</script>
		<script src="js/main.js"></script>
</body>
</html>